<template>
  <div class="menu" :style="'width: '+menuWidth2+'px'">
    <a-menu mode="inline" :open-keys="openKeys" :selectedKeys='selectedKeys' theme="dark" :style="'max-width: '+menuWidth+'px'" @openChange="onOpenChange">
      <template v-for="(item) in menuList">
        <a-menu-item :key="item.name" v-if="item.name==='home'&&item.is_show==1" >
          <router-link :to="item.path" exact><a-icon v-if="item.icon!=''" :type="item.icon" /><span>{{item.title}}</span></router-link>
        </a-menu-item>
        <a-sub-menu :key="item.name" v-if="item.name!='home'&&item.is_show==1">
          <span slot="title"><a-icon v-if="item.icon!=''" :type="item.icon" /><span>{{item.title}}</span></span>
          <template v-for="item2 in item.children">
            <a-sub-menu :key="item2.name" v-if="item2.children&&item2.is_show==1" >
              <span slot="title"><a-icon v-if="item2.icon!=''" :type="item2.icon" /><span>{{item2.title}}</span></span>
              <a-menu-item :key="item3.name" v-for="item3 in item2.children">
                <router-link :to="item3.path" exact>{{item3.title}}</router-link>
              </a-menu-item>
            </a-sub-menu>
            <a-menu-item :key="item2.name" v-if="!item2.children&&item2.is_show==1">
              <router-link :to="item2.path" exact>{{item2.title}}</router-link>
            </a-menu-item>
          </template>
        </a-sub-menu>
      </template>
    </a-menu>
  </div>
</template>

<script>
import config from 'public/config/config.js'
import {setCookie,getCookie} from 'api/common/cookie.js'
export default {
  name:'Menu',
  props:{
    
  },
  data() {
    return {
      menuWidth:config.menuWidth,
      menuWidth2:config.menuWidth + 18,
    };
  },
  computed: {
    menuList(){
      return this.$store.state.menu.menuTree
    },
    rootSubmenuKeys(){
      return this.$store.state.menu.rootSubmenuKeys
    },
    selectedKeys(){
      return this.$store.state.menu.selectedKeys
    },
    openKeys:{
      get:function(){
        return this.$store.state.menu.openKeys
      },
      set:function(){
        return this.$store.state.menu.openKeys
      }
    }
  },
  created() {
    
  },
  watch: {
    
  },
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
      let key = []
      // console.log("openKeys",openKeys,this.openKeys,this.rootSubmenuKeys,latestOpenKey)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        key = openKeys;
      } else {
        key = latestOpenKey ? [latestOpenKey] : [];
      }
      this.$store.commit('menu/setOpenKeys',key)
    },
  },
}
</script>

<style scoped> 
  .menu{
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
</style>